<!--  -->
<script setup>
import SiteBreads from './components/SiteBreads.vue'
import ThemeButton from '@/views/site/components/ThemeButton.vue'
import Back2Top from '@/views/site/components/Back2Top.vue'
import SearchInput from './components/SearchInput.vue'
import Icon from '@/components/Icon.vue'

import { useI18n } from 'vue-i18n'
import { switches } from '@/config'
import { useSiteStore } from '@/stores'
import { ref, watch } from 'vue'

const { locale } = useI18n()
const siteStore = useSiteStore()
const isDarkTheme = ref(siteStore.getTheme() === 'dark')

watch(
  isDarkTheme,
  nv => {
    document.documentElement.dataset.theme = nv ? 'dark' : 'light'
    siteStore.setTheme(nv ? 'dark' : 'light')
  }, { immediate: true }
)

function changeLang(e) {
  if (e.target.nodeName.toLowerCase() === 'li') {
    const v = e.target.dataset.value
    locale.value = v
    localStorage.setItem('lang', v)
  }
}

function toggleBannerState() {
  siteStore.setShowBanner(!siteStore.siteState.showBanner)
}

const searching = ref(false)
const searchText = ref('')

function doSearch() {


  searching.value = false
}

</script>

<template>
  <div class="sticky-header-container">
    <div class="top-navigation">
      <SiteBreads />
      <div class="site-actions-container">
        <div v-if="switches.enableSearch" class="header-search lang-switcher" @click="searching = !searching">
          <span v-if="searching" class="icon icon-cancel"></span>
          <span v-else class="icon icon-search"></span>
        </div>
        <div class="theme-switcher">
          <ThemeButton v-model="isDarkTheme" />
        </div>
        <div class="locale-switcher">
          <div class="lang-switcher">
            <span class="icon icon-lang"></span>
          </div>
          <ul class="dropdown-container" @click="changeLang">
            <li data-value="zh" class="dropdown-item">中文</li>
            <li data-value="en" class="dropdown-item">english</li>
          </ul>
        </div>
        <div class="read-mode-switcher" v-if="switches.enableBanner" @click="toggleBannerState">
          <span class="icon icon-read-mode"></span>
        </div>
        <div class="read-mode-switcher" @click="siteStore.setShowBlurModel(true)">
          <span class="icon icon-settings"></span>
        </div>
        <div class="news-wrapper">
          <RouterLink to="/news" class="news-link">{{ $t('header.news') }}</RouterLink>
        </div>
      </div>
    </div>
    <Back2Top />
  </div>
  <SearchInput v-model="searchText" :on-search="doSearch" :on-cancel="() => searching = false"
    :class="{ 'show-search': searching }" />
</template>

<style scoped lang="scss">
.sticky-header-container {
  position: sticky;
  /* for loading bar */
  top: 2px;
  z-index: 100;
}

.top-navigation {
  padding: 0 10px;
  padding-bottom: 0;
  position: sticky;
  top: 0;
  height: 26px;
  background-color: var(--site-header-bgc);
  z-index: 99;
  box-shadow: 2px 2px 3px var(--site-header-shadow);
  display: flex;
  justify-content: space-between;

  @media screen and (max-width: 446px) {
    flex-direction: column-reverse;
    height: auto;
  }
}

.site-actions-container {
  height: 100%;
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;

  @media screen and (max-width: 446px) {
    justify-content: flex-end;
    flex-direction: row-reverse;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-primary);
  }
}

.show-search {
  top: 0 !important;
}

.header-search {

  .icon-cancel {
    width: 18px;
    height: 18px;
    mask-image: url('/static/svg/cancel.svg');
  }

  .icon-search {
    width: 18px;
    height: 18px;
    mask-image: url('/static/svg/search.svg');
  }
}

.icon {
  mask-repeat: no-repeat;
  mask-position: center;
  vertical-align: middle;
  display: inline-block;
  background-color: var(--icon-bgc);
  margin: 1px;
}

.icon-lang {
  width: 18px;
  height: 18px;
  mask-image: url('/static/svg/lang.svg');
}

.icon-read-mode {
  width: 18px;
  height: 18px;
  mask-image: url('/static/svg/book.svg');
}

.icon-settings {
  width: 18px;
  height: 18px;
  mask-image: url('/static/svg/settings.svg');
}

.locale-switcher {
  background-color: #dcf1de;
  color: rgb(2, 47, 25);
  border: 1px solid #005319;
  border-radius: 2px;
  cursor: pointer;
  transition: all .3s ease-out;

  & .lang-switcher {
    padding: 0px 3px;
  }

  &:hover .dropdown-container {
    visibility: visible;
    opacity: 1;
  }

  &:hover,
  &:focus {
    background-color: #ddffe7;
  }
}

.dropdown-container {
  position: absolute;
  visibility: hidden;
  margin-top: 4px;
  opacity: 0;
  background-color: #dcf2e4;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  transition: all .3s ease-out;
}

.dropdown-item {
  transition: all .1s ease-out;
  padding: 5px 10px;
  cursor: pointer;

  &:hover {
    background-color: #84c99b;
  }
}

.header-search,
.read-mode-switcher {
  background-color: #dcf1de;
  border: 1px solid #005319;
  border-radius: 2px;
  cursor: pointer;
  transition: all .3s ease-out;
  padding: 0px 3px;

  &:hover,
  &:focus {
    background-color: #ddffe7;
  }
}

.news-wrapper {
  @media screen and (max-width: 882px) {
    display: none;
  }
}

.icon-container {
  display: flex;
  align-items: center;
  justify-self: center;
  border-radius: 10%;
  height: 22px;
  transition: background-color 0.15s linear;

  &:hover {
    background-color: var(--icon-ctn-hover-bgc);
  }

  &>div {
    margin: 5px;
  }
}

.news-link {
  border-radius: 2px;
  font-family: "Lato", "Helvetica", "Arial", sans-serif;
  font-size: 1.25rem;
  color: var(--text-secondary);
  font-style: italic;

  &:hover {
    background-color: var(--background-secondary);
  }
}
</style>
